<template>
  <div class="video-screen" @mouseover="showStop_fn()">
    <div class="container cruise-video">
      <div class="label">
        {{ data.alias }}
        <span v-if="data.channel" class="chns-txt">{{
          "通道" + Number(Number(data.channel) + 1)
        }}</span>
      </div>
      <div class="canvas-box">
        <!-- <live-player
          :id="'player' + index"
          :video-url="data.stream"
          live="true"
          aspect="fullscreen"
          autoplay
          controls="false"
        ></live-player> -->
        <EasyPlayer
          class="player-wrapper-content"
          :id="'videoId' + index"
          ref="video"
          controls
          :videoUrl="data.stream"
          live
          height="100%"
          width="100%"
          :isaspect="true"
          :stretch="false"
        ></EasyPlayer>
      </div>
      <div class="stop-btn" v-if="showStopBtn" @click.stop="stopFn()">
        <img :src="videoIcon.stop" alt="停止" title="停止" />
      </div>
    </div>
  </div>
</template>

<script>
//https://github.com/tsingsee/EasyPlayer.js
import EasyPlayer from "@easydarwin/easyplayer";
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";

export default {
  name: "",
  components: { EasyPlayer },
  props: {
    //传来的name即lable
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      video: null,
      videoUrl: "",
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
      },
      showStopBtn: true,
    };
  },
  computed: {},
  mounted() {
    this.error = false;
    this.video = this.$refs.video;
    // if (this.video.videoUrl != "") {
    //   this.video.destroyVideoJS();
    // }

    //初始的时候，3秒后隐藏关闭图标
    let that = this;
    setTimeout(() => {
      that.showStopBtn = false;
    }, 4000);
  },
  methods: {
    showStop_fn() {
      this.showStopBtn = true;
      let that = this;
      setTimeout(() => {
        that.showStopBtn = false;
      }, 3000);
    },
    //单个停止
    stopFn() {
      this.video.destroyVideoJS();
    },
    //获取url
    // getUrl(chns = 0) {
    //   return new Promise((resolve, reject) => {
    //     postData("/adminweb/device/stream/live/url/ticket/lasted/unlimited", {
    //       sn: this.data.sn,
    //       ptl: "WS-FLV",
    //       channel: chns,
    //       sub: 0,
    //     })
    //       .then((res) => {
    //         if (res.code == 0) {
    //           // this.videoUrl = res.datas.stream;
    //           this.videoUrl =
    //             "ws://52.131.47.150:48000/live/000.flv?tik=441aa579164f7dd5aec3c6e4c47a3371&tikpwd=";
    //           resolve(res);
    //         } else if (res.code == -56055) {
    //           return;
    //         } else {
    //           this.$message.error(res.code + "，" + res.msg);
    //         }
    //       })
    //       .catch((res) => {
    //         console.log(res);
    //         reject("error");
    //         this.$message.error("error");
    //       });
    //   });
    // },
  },
  watch: {
    // data: {
    //   handler(_new,_old) {
    //     if (_old != _new) {
    //       this.videoData = _new;
    //       this.getUrl(_new, this.chns);
    //     }
    //   },
    // },
  },
  beforeDestory() {
    this.video.destroyVideoJS();
  },
};
</script>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.player-wrapper-content {
  width: 100%;
  height: 100%;
}
.container {
  width: 200px;
  height: 200px;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.chns-txt {
  margin-left: 10px;
  color: #6cbddd;
}
.stop-btn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.stop-btn img {
  width: 70%;
  height: 70%;
}
/* .fullScreen-btn {
  cursor: pointer;
  margin-left: 20px;
 
}
.fullScreen-btn img {
  width: 70%;
  height: 70%;
} */

.canvas-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.errorWrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 1);
}
/* .canvas {
  width: 100%;
  height: 100%;
} */
</style>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.player-wrapper-content {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.chns-label {
  margin-right: 10px;
}
.btn-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 999;
}
/* .play-btn {
  cursor: pointer;
}
.play-btn img {
  width: 80%;
  height: 80%;
} */
.stop-btn {
  cursor: pointer;
}
.stop-btn img {
  width: 60%;
  height: 60%;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */

video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
/* 
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-current-time-display{
    display: none;            
}
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
video::-webkit-media-controls-volume-slider {
    display: none;            
}
video::-webkit-media-controls-enclosure{
    display: none;
} */

/* 视频全铺 */
.video {
  object-fit: fill;
}
</style>
<style>
.player-wrapper-content .player-content {
  width: 100%;
  height: 100%;
}

.player-wrapper-content .video-wrapper {
  position: revert !important;
}
</style>
